<template>
  <div class="homeMain">
    <div class="mainTop">
      <!-- 轮播图 -->
      <div class="mainFocus block">
        <el-carousel height="500px">
          <el-carousel-item>
            <img src="./img/1142f981e52f29c0.jpg.webp" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="./img/c0d9d062d5374ac8.jpg.webp" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="./img/e08330472baef74d.jpg.webp" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 右侧今日快报区 -->
      <div class="mainRight">
        <div class="kuaibao">
          <h1>商品汇快报</h1>
          <span>更多>>></span>
        </div>
        <ul class="notice">
          <li><span>[特惠]</span>备战开学季 全民半价购数码</li>
          <li><span>[公告]</span>备战开学季 全民半价购数码</li>
          <li><span>[特惠]</span>备战开学季 全民半价购数码</li>
          <li><span>[公告]</span>备战开学季 全民半价购数码</li>
          <li><span>[特惠]</span>备战开学季 全民半价购数码</li>
        </ul>
        <div class="elf">
          <a href=""><span> 话费 </span></a>
          <a href=""><span> 机票 </span></a>
          <a href=""><span> 电影票</span></a>
          <a href=""><span> 游戏</span></a>
          <a href=""><span> 彩票</span></a>
          <a href=""><span> 加油站</span></a>
          <a href=""><span> 酒店 </span></a>
          <a href=""><span> 火车票</span></a>
          <a href=""><span> 众筹 </span></a>
          <a href=""><span> 理财 </span></a>
          <a href=""><span> 礼品卡</span></a>
          <a href=""><span> 白条 </span></a>
        </div>
        <div class="img"><img src="./img/ad1.1fe78eff.png" alt="" /></div>
      </div>
    </div>
    <!-- 今日推荐区 -->
    <todayRecommend></todayRecommend>
    <Rank></Rank>
    <Guesslike></Guesslike>
    <Floor v-for="f in Floors" :key="f.FloorId" :floor='f'></Floor>
    <RightNav></RightNav>
  </div>
</template>

<script>
import todayRecommend from '../../components/recommend/todayRecommend'
import Rank from '../../components/rank/Rank.vue'
import Guesslike from '../../components/Guesslike/Guesslike.vue'
import Floor from '../../components/Floor/Floor.vue'

import { mapState } from 'vuex'
export default {
  name: 'home',
  data () {
    return {
      Img: ''
    }
  },
  computed: {
    ...mapState('homeAbout', ['Floors'])
  },
  mounted () {
    this.$bus.$emit('getShow', true)
    this.$store.dispatch('homeAbout/getFloor')
  },
  components: {
    todayRecommend,
    Rank,
    Guesslike,
    Floor

  }

}
</script>

<style scoped lang="less">

.homeMain {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  .mainTop {
    overflow: hidden;
  }
  .mainFocus {
    float: left;
    height: 500px;
    width: 700px;
    margin: 0  10px 0 223px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .mainRight {
    // position: absolute;
    // left: 940px;
    float: right;
    height: 500px;
    width: 260px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    .kuaibao {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      color: #303133;
      height: 40px;
      border-bottom: 1px solid #ccc;
      h1 {
        font-size: 14px;
      }
      span {
        font-size: 12px;
      }
    }
    .notice {
      height: 145px;
      padding: 10px 0px 10px 10px;
      border-bottom: 1px solid #dcdfe6;
      & > li {
        font-size: 14px;
        color: #303133;
        line-height: 25px;
        span {
          font-weight: bold;
        }
      }
    }
    .elf {
      // border-bottom: 1px solid #DCDFE6;
      display: flex;
      height: 205px;
      flex-wrap: wrap;
      background: url('./img/icons.eb262dc2.png') no-repeat 1px 0px;
      a {
        border-bottom: 1px solid #dcdfe6;
        width: 25%;
        border-right: 1px solid #dcdfe6;
        box-sizing: border-box;
        font-size: 13px;
        color: #303133;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        span {
          height: 20px;
        }
        &:nth-child(4n) {
          border-right: none;
        }
      }
    }
    .img {
      margin-top: 10px;
      img {
        width: 100%;
      }
    }
  }
}
</style>
